{% extends "base.html" %}
{% load static %}

{% block title %}帐号设置{% endblock %}

{% block site_css %}
{{ block.super }}
<link href="{% static 'css/jcrop.min.css' %}" rel="stylesheet">
{% endblock %}

{% block site_js %}
{{ block.super }}
<script src="{% static 'js/jcrop.min.js' %}"></script>
<script src="{% static 'js/avatar.js' %}"></script>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>帐号设置</h1>
</div>
<div class="row" style="margin-top: 2em">
    <div class="col-md-3">
        {% include 'accounts/includes/partial_settings_menu.html' with active='avatar' %}
    </div>
    <div class="col-md-9">
        <img src="{{ user.profile.get_avatar }}" style="width: 150px; border-radius: 5px; margin-bottom: 1em;">
        <form enctype="multipart/form-data" method="post" action="{% url 'accounts:upload_avatar' %}" id="avatar-upload-form">
            {% csrf_token %}
            <input type="file" name="avatar" style="display: none">
            <button type="button" class="btn btn-default" id="btn-upload-avatar">上传头像</button>
        </form>

        {% if uploaded_avatar %}
            <form method="post" action="{% url 'accounts:save_uploaded_avatar' %}">
                {% csrf_token %}
                <div class="modal fade" id="modal-upload-avatar">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title">剪切头像</h4>
                            </div>
                            <div class="modal-body">
                                <div class="selected-avatar">
                                    <p>请选择要剪切的区域，确定后点击<strong>保存</strong>按钮</p>
                                    <img src="{% get_media_prefix %}avatars/{{ user.date_joined.year }}/{{ user.date_joined.month }}/{{ user.date_joined.day }}/{{ user.username }}_tmp.jpg?_={% now 'U' %}" id="crop-avatar">
                                    <input type="hidden" id="x" name="x" />
                                    <input type="hidden" id="y" name="y" />
                                    <input type="hidden" id="w" name="w" />
                                    <input type="hidden" id="h" name="h" />
                                </div>
                                <script type="text/javascript">
                                    $(function () {
                                        $("#modal-upload-avatar").modal();
                                        window.history.pushState("", "", "{% url 'accounts:avatar' %}");
                                    });
                                </script>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="submit" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        {% endif %}
    </div>
</div>
{% endblock %}